<template>
  <Dialog
    class="edit"
    icon="xinjian"
    :title="title"
    :visible="visible"
    @close="hide"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      :label-suffix="$t('tip.colon')"
      :label-width="labelWidth"
      size="small"
      inline
    >
      <slot v-bind:formData="formData"></slot>
    </el-form>
    <template #footer>
      <el-button
        size="small"
        type="primary"
        :loading="submiting"
        @click="submitForm"
      >
        {{ $t('action.save') }}
      </el-button>
      <el-button size="small" @click="resetForm">{{
        $t('action.reset')
      }}</el-button>
    </template>
  </Dialog>
</template>

<script>
import { Dialog } from 'components'
export default {
  name: 'Edit',
  components: { Dialog },
  props: {
    titles: {
      type: [String, Object],
      default: ''
    },
    services: {
      type: [Function, Object],
      required: true
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    defaultData: {
      type: Object,
      default: () => ({})
    },
    labelWidth: {
      type: String,
      default: '120px'
    }
  },
  data() {
    return {
      visible: false,
      editData: null,
      formData: {},
      submiting: false
    }
  },
  computed: {
    title() {
      if (typeof this.titles === 'string') {
        return this.titles
      }
      if (this.titles.add && this.titles.update) {
        return this.isAdd ? this.titles.add : this.titles.update
      } else {
        return this.titles.add || this.titles.update
      }
    },
    service() {
      if (typeof this.services === 'function') {
        return this.services
      }
      if (this.services.add && this.services.update) {
        return this.isAdd ? this.services.add : this.services.update
      } else {
        return this.services.add || this.services.update
      }
    },
    isAdd() {
      return !this.editData
    }
  },
  methods: {
    show(data) {
      this.visible = true
      this.initData(data)
    },
    hide() {
      this.visible = false
      this.clearForm()
    },
    initData(data) {
      this.editData = data
      this.resetForm()
    },
    clearForm() {
      this.formData = {}
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
    },
    resetForm() {
      this.clearForm()
      if (this.editData) {
        this.formData = { ...this.editData }
      } else {
        this.formData = { ...this.defaultData }
      }
    },
    async submitForm() {
      try {
        await this.$refs.form.validate()
        const submitService = this.service
        this.submiting = true
        const { data } = await submitService(this.formData)
        this.hide()
        this.$emit('submit-success', data)
      } catch ({ msg }) {
        msg && this.$error(msg)
      } finally {
        this.submiting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
.edit {
  ::v-deep.el-form-item {
    display: flex;
  }
  ::v-deep.el-form-item__content {
    flex: 1;
    width: 100% !important;
  }
  ::v-deep.el-input {
    width: 100%;
  }
  ::v-deep.el-select {
    width: 100%;
  }
  ::v-deep.el-cascader {
    width: 100%;
  }
  ::v-deep.el-input-number {
    width: 100%;
  }
  ::v-deep.el-date-editor {
    width: 100%;
  }
}
</style>
